<template>
  <div class="aside-tree-container">
    <div class="projet-head">
      <el-input
        v-model="deptName"
        placeholder="请输入部门/项目名称 → 回车检索"
        clearable
        size="mini"
        prefix-icon="el-icon-search"
        style="margin-bottom: 12px;width: 180px;margin-left: 20px;margin-right: 10px;"
        @keyup.enter.native="searchProject"
      />
      <el-button type="primary" size="mini" icon="el-icon-search" @click="searchProject">搜索</el-button>
    </div>
    <el-scrollbar style="height: 54vh;">
      <el-tree
        ref="tree"
        v-loading="projectLoading"
        node-key="id"
        accordion
        :data="deptOptions"
        :props="defaultProps"
        highlight-current
        :expand-on-click-node="false"
        :default-expanded-keys="expandKeys"
        :filter-node-method="filterNodeDept"
        show-checkbox
        @check-change="handleCheckChange"
      >
        <div slot-scope="{ node, data }">
          <svg-icon v-if="data.type === 'dept'" icon-class="ico_area" class="preview-icon" />
          <svg-icon
            v-else-if="data.type === 'project'"
            class="preview-icon"
            style="color: #416ca6;"
            icon-class="druid"
          />
          <span style="padding-left: 6px;">{{ node.label }}</span>
        </div>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import { getDeptProject } from '@/api/common'
export default {
  name: 'ProjectTree',
  props: {
    type: { // 0: 项目前期名 1：项目后期名称
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      deptName: '',
      projectLoading: false,
      deptOptions: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      expandKeys: []
    }
  },
  watch: {
    // 根据名称筛选部门树
    // deptName(val) {
    //   this.$refs.tree.filter(val)
    // }
  },
  created() { // 初始化
    this.getTreeselect()
  },
  methods: {
    // 检索
    searchProject() {
      this.$refs.tree.filter(this.deptName)
    },
    setCheckedKeys(keys = [], leafOnly = false) {
      this.$refs.tree.setCheckedKeys(keys, leafOnly)
    },
    getCheckedProjects() {
      const nodes = this.$refs.tree.getCheckedNodes(true)
      const projects = []
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].type === 'project') {
          projects.push({
            fid: nodes[i].id,
            fnameL2: nodes[i].name,
            cflastname: nodes[i].lastname
          })
        }
      }
      return projects
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
      this.$emit('check-change', { data, checked, indeterminate })
    },
    /** 查询部门与项目下拉树结构 */
    getTreeselect() {
      this.projectLoading = true
      getDeptProject({ type: this.type }).then((response) => {
        this.projectLoading = false
        this.deptOptions = response.data
      })
    },
    // 组织筛选节点
    filterNodeDept(value, data, node) {
      if (!value) return true
      // return data.label.indexOf(value) !== -1
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label && label.indexOf(value) !== -1)
    }
  }
}
</script>

<style scoped lang='scss'>
  .aside-tree-container {
    .projet-head {
      padding-top: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      margin-bottom: 10px;
    }
    font-size: 12px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  }
</style>
<style lang="scss">
  .check-type-scrollbar-container,
  .aside-tree-container {
    .el-scrollbar .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>
